<template>
  <div>
    <h1>这是网站配置界面</h1>
    <el-tabs type="border-card">
      <!-- tab栏1 -->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 网站信息</span>
        <div class="box-one">
          <el-form
            :label-position="labelPosition"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            width="120"
          >
            <!-- 登记页面 -->
            <el-row :span="12">
              <el-form-item label="LOGO" prop="name" class="text-left">
                <el-col :span="2">
                  <!-- <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                  > -->

                  <i class="el-icon-plus"></i>
                  <!-- </el-upload> -->
                </el-col>
              </el-form-item>
            </el-row>
            <!-- 网站名称与标题 -->
            <el-row :span="12">
              <el-col :span="5">
                <el-form-item label="网站名称" prop="name" class="text-left">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="标题" prop="name" class="text-left">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 关键字和描述 -->
            <el-row :span="12">
              <el-col :span="5">
                <el-form-item label="关键字" prop="name" class="text-left">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="描述" prop="name" class="text-left">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 作者与备案号 -->
            <el-row :span="12">
              <el-col :span="5">
                <el-form-item label="作者" prop="name" class="text-left">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="备案号" prop="name" class="text-left">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 阿里支付与微信支付 -->
            <el-row :span="12">
              <el-col :span="5">
                <el-form-item label="阿里支付" prop="name" class="text-left">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                  >
                    <img v-if="ZfbImageUrl" :src="ZfbImageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="微信支付" prop="name" class="text-left">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                  >
                    <img v-if="WxImageUrl" :src="WxImageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 登录方式 -->
            <el-row :span="12">
              <el-form-item label="登录方式" prop="name" class="text-left">
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">账号密码</el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">码云</el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">Github</el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">QQ</el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedWx" class="row">微信</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
            <!-- 网站评论 -->
            <el-row :span="12">
              <el-form-item label="网站评论" prop="name" class="text-left">
                <el-col :span="2">
                  <el-radio v-model="radio" label="1" border>开启</el-radio>
                </el-col>
                <el-col :span="2">
                  <el-radio v-model="radio" label="2" border>关闭</el-radio>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <!-- tab栏2 -->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 关于我们</span>
        <div class="box-two">
          <!--关于我们的主图  -->
          <el-form
            :label-position="labelPosition"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            width="120"
          >
            <!--邮箱-->
            <el-row :span="12">
              <el-form-item label="邮箱" prop="name" class="text-left">
                <el-col :span="10">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">在首页显示</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
            <!-- QQ号 -->
            <el-row :span="12">
              <el-form-item label="QQ号" prop="name" class="text-left">
                <el-col :span="10">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">在首页显示</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
            <!-- QQ群 -->
            <el-row :span="12">
              <el-form-item label="QQ群" prop="name" class="text-left">
                <el-col :span="10">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">在首页显示</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
            <!-- github -->
            <el-row :span="12">
              <el-form-item label="github" prop="name" class="text-left">
                <el-col :span="10">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">在首页显示</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
            <!-- Gitee -->
            <el-row :span="12">
              <el-form-item label="Gitee" prop="name" class="text-left">
                <el-col :span="10">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedYx" class="row">在首页显示</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
            <!-- 微信 -->
            <el-row :span="12">
              <el-form-item label="微信" prop="name" class="text-left">
                <el-col :span="10">
                  <el-input v-model="ruleForm.name" class="input-left"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="checkedWx" class="row">在首页显示</el-checkbox>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- logo点击 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogImageUrl: String,
    dialogVisible: Boolean,
  },
  data() {
    return {
      labelPosition: 'left',
      checkedYx: true,
      checkedWx: false,
      radio: '2',
      WxImageUrl: '../assets/wx.png',
      ZfbImageUrl: '../assets/zfb.png',
      ruleForm: {
        name: '213123123',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        // logo
        dialogImageUrl: '',
        dialogVisible: false,
      },
      rules: {
        name: [
          { message: '请输入邮箱', trigger: 'blur' },
          {
            min: 3,
            max: 16,
            message: '请输入正确格式',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // logo
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.box-two {
  padding: 20px;
}
.row {
  padding-left: 1px;
}
.text-left {
  font-weight: 900;
}
.input-left {
  margin-left: -22px;
}
.button-go {
  display: inline-block;
}
// 支付图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
